<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="author" content="94hi.tw">
    <meta name="copyright" content="Copyright (c) 94hi.tw">
    <meta name="description" content="94hi.tw就是嗨！">
    <meta name="keywords" content="94hi,94hi.tw,94hi.tw就是嗨！">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="MobileOptimized" content="320">
    <meta name="format-detection" content="telephone=no, address=no, email=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <title>會員中心：會員資訊</title>
    <link rel="stylesheet" href="assets/css/core.css">
    <link rel="stylesheet" href="assets/css/ui-form.css">
    <link rel="stylesheet" href="assets/css/ui-dialog.css">
    <link rel="stylesheet" href="assets/css/member.css">
</head>
<body>
    <header>
        <div class="header">
            <h1 class="logo">
                <a href="index.html">94hi.tw就是嗨！</a>
            </h1>

            <ul class="nav">
                <li>
                    <a href="index.html">首頁</a>
                </li>
                <li>
                    <a href="preorder.html">遊戲預購</a>
                </li>
                <li>
                    <a href="games/all.html">遊戲大廳</a>
                </li>
                <li class="current">
                    <a href="member.html">會員中心</a>
                </li>
                <li>
                    <a href="purchase/platform/step1.html">購點儲值</a>
                </li>
                <li>
                    <a href="cs/help.html">客戶服務</a>
                </li>
            </ul>

            <div class="user">
                <!-- 未登入 -->
                <div class="user-unlogin">
                    <a href="login/password.html">登入</a>
                    <a href="join/phone.html">註冊</a>
                </div>

                <!-- 已登入 -->
                <!-- <div class="user-logined" id="j-user-logined">
                    <a href="javascript:;" class="user-name">漲帳戶姓名</a>

                    <ul class="user-menu">
                        <li>咪曉那</li>
                        <li>
                            <a href="">我的帳號</a>
                        </li>
                        <li>
                            <a href="">會員任務</a>
                        </li>
                        <li>
                            <a href="">會員月卡</a>
                        </li>
                        <li>
                            <a href="">會員季卡</a>
                        </li>
                        <li>
                            <a href="">切換會員帳號</a>
                        </li>
                    </ul>
                </div> -->
            </div>
        </div>

        <div class="page-header">
            <div class="page-header-con con">
                <h2 class="page-title">會員中心</h2>

                <ul class="page-nav">
                    <li class="current">
                        <a href="member.html">會員資訊</a>
                    </li>
                    <li>
                        <a href="member/password.html">修改密碼</a>
                    </li>
                    <li>
                        <a href="member/own/infor.html">我的帳號</a>
                    </li>
                    <li>
                        <a href="member/googleauth/step1.html">帳戶安全</a>
                    </li>
                    <li>
                        <a href="member/mission/day.html">會員任務</a>
                    </li>
                    <li>
                        <a href="member/investment/month.html">會員投資</a>
                    </li>
                    <li>
                        <a href="member/otherbind/step1.html">其他遊戲綁定</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <main>
        <div class="main">
            <div class="member-info member-con con con-bg">
                <section class="member-info-sec">
                    <h3 class="member-info-sec-hd">會員帳戶</h3>
                    <div class="member-info-sec-bd">
                        <dl class="member-info-dl">
                            <dt>手機帳戶</dt>
                            <dd>
                                +886 台灣 0972***222
                            </dd>
                        </dl>
                        <dl class="member-info-dl">
                            <dt>帳戶暱稱</dt>
                            <dd>
                                0972***222

                                <!-- 點擊變更顯示 -->
                                <!-- <div class="member-info-input ui-form-input auto">
                                    <input type="text" name="" id="" placeholder="請輸入帳戶暱稱" required>
                                </div> -->

                                <button type="button" class="member-info-button ui-button">變更</button>
                            </dd>
                        </dl>
                        <dl class="member-info-dl">
                            <dt>帳戶 UID</dt>
                            <dd>F0895412</dd>
                        </dl>

                        <dl class="member-info-dl">
                            <dt>帳戶認證</dt>
                            <dd>
                                未認證
                                <button type="button" class="member-info-button ui-button">認證</button>
                            </dd>
                        </dl>
                        <dl class="member-info-dl">
                            <dt>帳戶安全</dt>
                            <dd>
                                未啟用
                                <a href="member/googleauth/step1.html" class="member-info-button ui-button">啟用</a>
                            </dd>
                        </dl>
                        <dl class="member-info-dl">
                            <dt>遊戲優惠卷</dt>
                            <dd>
                                <p>可用 <strong>1</strong> 張</p>
                                <a href="member/infor/coupon/usable.html" class="member-info-button ui-button">查看</a>
                            </dd>
                        </dl>
                        <dl class="member-info-dl">
                            <dt>聯絡 Email</dt>
                            <dd>
                                <div class="member-info-input ui-form-input auto">
                                    <input type="email" name="" id="" placeholder="請輸入聯絡 Email" required>
                                </div>
                                <button type="button" class="member-info-button ui-button">確認</button>
                            </dd>
                        </dl>
                        <dl class="member-info-dl">
                            <dt>聯絡手機</dt>
                            <dd>
                                <div class="member-info-input ui-form-input auto">
                                    <input type="tel" name="" id="" placeholder="請輸入聯絡手機號碼" required>
                                </div>
                                <button type="button" class="member-info-button ui-button">變更</button>
                            </dd>
                        </dl>
                    </div>
                </section>

                <section class="member-info-sec">
                    <h3 class="member-info-sec-hd">會員帳號</h3>
                    <div class="member-info-sec-bd">
                        <dl class="member-info-dl">
                            <dt>帳戶 UID</dt>
                            <dd>F0895412</dd>
                        </dl>
                        <dl class="member-info-dl">
                            <dt>平台點數</dt>
                            <dd>
                                1,205
                                <button type="button" class="member-info-button ui-button">儲值</button>
                            </dd>
                        </dl>
                        <dl class="member-info-dl">
                            <dt>紅利點數</dt>
                            <dd>
                                <div class="member-point">
                                    <ul class="member-point-history">
                                        <li class="member-point-item">
                                            <h4>7-8月獲得</h4>
                                            <p>今年10/31到期</p>
                                            <strong>56</strong>
                                        </li>
                                        <li class="member-point-item">
                                            <h4>9-10月獲得</h4>
                                            <p>今年10/31到期</p>
                                            <strong>1,556</strong>
                                        </li>
                                        <li class="member-point-item">
                                            <h4>11-12月獲得</h4>
                                            <p>今年12/31到期</p>
                                            <strong>1,556</strong>
                                        </li>
                                    </ul>

                                    <!-- 頁面已寫腳本綁定點擊效果 點擊顯示 紅利點數時效說明 彈窗 -->
                                    <button type="button" class="member-point-button" title="紅利點數時效說明" id="j-show-member-point-desc">紅利點數時效說明</button>
                                </div>
                            </dd>
                        </dl>
                    </div>
                </section>
            </div>
        </div>
    </main>

    <footer>
        <section class="footer">
            <div class="footer-con">
                <h2 class="footer-logo">94hi.tw就是嗨！</h2>

                <ul class="footer-nav">
                    <li>
                        <a href="about.html">關於我們</a>
                    </li>
                    <li>
                        <a href="contract.html">會員條款</a>
                    </li>
                    <li>
                        <a href="privacy.html">隱私權政策</a>
                    </li>
                    <li>
                        <a href="regulation.html">遊戲管理規章</a>
                    </li>
                    <li>
                        <a href="contact.html">商務接洽</a>
                    </li>
                </ul>
            </div>
        </section>

        <section class="copyright">
            <div class="copyright-con">
                <p class="copyright-content">紅番茄愛娛樂股份有限公司 ©2020 Happy Tomato All Rights Reserved</p>

                <ul class="contact">
                    <li>
                        <a href="" class="line">line</a>
                    </li>
                    <li>
                        <a href="" class="facebook">facebook</a>
                    </li>
                </ul>
            </div>
        </section>
    </footer>

    <!-- 紅利點數時效說明 弹窗 -->
    <div class="ui-dialog" id="j-member-point-desc">
        <div class="ui-dialog-con">
            <header class="ui-dialog-hd">
                <h2 class="ui-dialog-title">紅利點數時效說明</h2>
                <button type="button" class="ui-dialog-close">關閉</button>
            </header>

            <main class="ui-dialog-bd">
                <div class="member-point-desc">
                    <table class="member-point-desc-table">
                        <thead>
                            <tr>
                                <th>紅利點數獲得時間</th >
                                <th width="40%">到期清空時間</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>每年1-2月獲得的紅利點數</td>
                                <td>當年度4月</td>
                            </tr>
                            <tr>
                                <td>每年3-4月獲得的紅利點數</td>
                                <td>當年度6月底</td>
                            </tr>
                            <tr>
                                <td>每年5-6月獲得的紅利點數</td>
                                <td>當年度8月底</td>
                            </tr>
                            <tr>
                                <td>每年7-8月獲得的紅利點數</td>
                                <td>當年度10月底</td>
                            </tr>
                            <tr>
                                <td>每年9-10月獲得的紅利點數</td>
                                <td>當年度12月底</td>
                            </tr>
                            <tr>
                                <td>每年11-12月獲得的紅利點數</td>
                                <td>隔年度2月底</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </main>
        </div>
    </div>
    <!-- 綁定顯示 紅利點數時效說明 彈窗 腳本 -->
    <script>
        ;(function ( ){
            let memberPointDesc = document.getElementById('j-member-point-desc');
            let showMemberPointDesc = document.getElementById('j-show-member-point-desc');
            showMemberPointDesc.addEventListener('click', () => {
                memberPointDesc.classList.add('show');
            }, false);

            memberPointDesc.addEventListener('click', function (e) {
                if (e.target.classList.contains('ui-dialog-close')) {
                    memberPointDesc.classList.remove('show');
                }
            }, false);
        }());
    </script>
</body>
</html>
